<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">合作商管理</el-breadcrumb-item>
                <el-breadcrumb-item>项目管理</el-breadcrumb-item>
                <el-breadcrumb-item>项目编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="projectForm" :model="projectForm" :rules="rules" label-width="120px">
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="项目信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目编号" prop="project_code">
                            <el-input v-model="projectForm.project_code" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目名称" prop="project_name">
                            <el-input v-model="projectForm.project_name" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目类型" prop="project_type">
                            <el-select v-model="projectForm.project_type" filterable placeholder="请选择"
                                       style="width: 100%">
                                <el-option v-for="item in project_type" :key="item.value" :label="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目阶段" prop="project_stage">
                            <el-select v-model="projectForm.project_stage" filterable placeholder="请选择"
                                       style="width: 100%">
                                <el-option v-for="item in stages" :key="item.value" :label="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="业务人员" prop="business_personnel">
                            <el-select v-model="projectForm.business_personnel" filterable placeholder="请选择"
                                       style="width: 100%">
                                <el-option v-for="item in userList" :key="item.user_name" :label="item.user_name"
                                           :value="item.user_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目来源" prop="project_source">
                            <el-select v-model="projectForm.project_source" filterable placeholder="请选择"
                                       style="width: 100%">
                                <el-option v-for="item in project_source" :key="item.value" :label="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目区域" prop="project_area">
                            <el-select v-model="projectForm.project_area" filterable placeholder="请选择"
                                       style="width: 100%">
                                <el-option v-for="item in project_area" :key="item.value" :label="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目地址" prop="project_address">
                            <el-input type="textarea" v-model="projectForm.project_address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目说明" prop="project_description">
                            <el-input type="textarea" v-model="projectForm.project_description"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('projectForm')">立即创建</el-button>
                    <a onclick="javascript:history.back(-1);">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                companyId:'',
                loading: false,
                rules: {
                    project_code: [{
                        required: true,
                        message: '请输入项目编号',
                        trigger: 'blur'
                    }],
                    project_name: [{
                        required: true,
                        message: '请输入项目名称',
                        trigger: 'blur'
                    }],
                },
                projectForm: {
                    project_code: "",
                    project_name: "",
                    project_type: "",
                    project_stage: "",
                    business_personnel: "",
                    project_source: "",
                    project_area: "",
                    project_address: "",
                    project_description: "",
                },
                stages: [
                    {
                        value: "跟踪阶段",
                    },
                    {
                        value: "商务阶段",
                    },
                    {
                        value: "已签约",
                    },
                    {
                        value: "已完工",
                    },
                    {
                        value: "已结算",
                    }, {
                        value: "维保中",
                    }
                ],
                project_type: [
                    {
                        value: "工程批量",
                    },
                    {
                        value: "工程样板房",
                    }
                ],
                project_source:[
                    {
                        value: "品宅导流",
                    },{
                        value: "自行拓展",
                    }
                ],
                project_area:[
                    {
                        value: "华南",
                    },{
                        value: "西北",
                    },{
                        value: "华北",
                    },{
                        value: "华东",
                    },{
                        value: "西南",
                    },{
                        value: "华中",
                    },
                ],
                userList:[],
            }
        },
        methods: {
            getUserList() {
                $.ajax({
                    url: '/user/getUserListByCompanyId.json?companyId=' + this.companyId,
                    type: 'get',
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.userList = result.data;
                        } else {
                        }
                    }
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        $.ajax({
                            url: '/project/update.json',
                            type: 'post',
                            data: this.projectForm,
                            dataType: 'json',
                            success: (result) => {
                                this.loading = false;
                                if (result.ret) {
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href = "/project/list.page";
                                    }, 1000);
                                } else {
                                    this.$message.error(result.msg);
                                }
                            }
                        });
                    } else {
                        return false
                    }
                });
            },
            ajaxFunction() {
                $.ajax({
                    url: '/project/detail.json?id=' + this.id,
                    type: 'get',
                    dataType: 'json',
                    success: (result) => {
                        console.log(result.data)
                        if (result.ret) {
                            this.projectForm = result.data;
                        }
                    }
                });
            },
        },
        mounted() {
            this.id = '${id !''}';
            this.companyId='${company_id}';
            this.ajaxFunction();
            this.getUserList();
        }
    })
</script>

</body>

</html>